<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    #div1 {
        width: 100px;
        height: 100px;
        background: red;
        position: absolute;
    }
    </style>
    <script type="text/javascript">
    //鼠标按下
    //鼠标抬起
    //鼠标移动
    var oDiv = null;
    var disX = 0;
    var disY = 0;
    window.onload = function() {
        //console.log(window.screen.availWidth);
        oDiv = document.getElementById('div1');
        disX = 0;
        disY = 0;
        //alert(oDiv);
        oDiv.onmousedown = fnDown;

    };


         function fnDown(ev) {
            var oEvent = ev || event;
            //pos=getpos(oEvent);
            //鼠标的位置减去DIV的位置
            if (oDiv.setCapture) {
                disX = oEvent.clientX - oDiv.offsetLeft;
                disY = oEvent.clientY - oDiv.offsetTop;
                oDiv.onmousemove = fnMove;
                oDiv.onmouseup = fnUp;
                //在IE7下使用事件捕获，确保所有的事件都指向DIV
                oDiv.setCapture();
                return false;
            } else {
                disX = oEvent.clientX - oDiv.offsetLeft;
                disY = oEvent.clientY - oDiv.offsetTop;

                document.onmousemove = fnMove;
                document.onmouseup = fnUp
                return false;
            };
      }

       function fnMove(ev) {
            var oEvent = ev || event;
            var l = oEvent.clientX - disX;
            var t = oEvent.clientY - disY;
            oDiv.style.left = l + 'px';
            oDiv.style.top = t + 'px';
        };

        function fnUp() {
            this.onmousemove = null;
            this.onmouseup = null;
            //在使用了事件捕获之后，在鼠标抬起的时候。需要释放这个事件捕获，不然的话，无法进行任何操作
            if (oDiv.releaseCapture) {
               oDiv.releaseCapture();
            };
        };



    </script>
</head>

<body>
    <div id="div1"></div>
</body>

</html>